{% extends "_layouts/examples.html" %}
{% block title %}Search box / Default{% endblock %}

{% block standalone_css %}patterns_search-box{% endblock %}

{% block content %}
<form class="p-search-box">
  <label class="u-off-screen" for="search">Search</label>
  <input type="search" id="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on">
  <button type="reset" class="p-search-box__reset"><i class="p-icon--close">Close</i></button>
  <button type="submit" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
</form>
<form class="p-search-box">
  <label class="u-off-screen" for="search-disabled">Search</label>
  <input type="search" id="search-disabled" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on" disabled>
  <button type="reset" class="p-search-box__reset" disabled><i class="p-icon--close">Close</i></button>
  <button type="submit" class="p-search-box__button" disabled><i class="p-icon--search">Search</i></button>
</form>

<script>
  {% include 'docs/examples/patterns/search-box/_script.js' %}
</script>
{% endblock %}
